import Page from '@/components/Layout'
import styles from './styles.module.scss'
import { getMatchList, getScoreBoardData } from '@/server/news'
import { Breadcrumb } from 'antd';
import { Types, en } from "@/components/Scoreboard/types";
import { useState } from 'react'
import RenderJudge from "@/components/RenderJudge"
import { useAsyncEffect, useCreation, useMemoizedFn, useRequest } from "ahooks";
import classNames from 'classnames';
import hotImg from '@/assets/hot.png'
import AllImg from '@/assets/all.png'
import Live from '@/components/Live'
import { useRef } from 'react';
import Head from 'next/head';

const Integral = ({ matchList, mobile }) => {
  const [tabescent, setTabescent] = useState(matchList[0]);
  const SecondList = (current) => {
    if (current.compName === 'NBA') return Types.NBA
    if (current.compName === 'CBA') return Types.CBA
    if (current.compName === '热门' || current.compName === '全部') return Types.schedule
    if (current.matchType === 1) return Types.football
  }
  const [blockData, setBlockData] = useState(null)

  const [selectType, setSelectType] = useState(SecondList(tabescent)[0])


  const { runAsync } = useRequest(getScoreBoardData, {
    onSuccess: (res, [id, type]) => {
      setBlockData(res)
    },
    manual: true
  })

  const changeTab = useMemoizedFn(async (value) => {
    setTabescent(value)
    setSelectType(SecondList(value)[0])
    await runAsync(value.id, SecondList(value)[0].value)
  })

  useAsyncEffect(async () => {
    await runAsync(matchList[0].id, SecondList(tabescent)[0]?.value)
  }, [])

  const changSecondTab = async (row) => {
    setSelectType(row)
    console.log(row, 'XUANZE')
    if (row?.value === 's') return
    await runAsync(tabescent.id, row.value)
  }

  const BlockFilterData = useCreation(() => {
    if (blockData?.length === 0) return []
    if ([3, 4, 5].includes(selectType.value)) {
      //篮球的得分榜
      return blockData
    }
    if (tabescent.compName === 'NBA' && blockData?.tables) {
      if ([-1, -2].includes(selectType.value)) {
        //东部和西部数据
        const maxArray = blockData?.tables.map((item) => item.scope);
        const newScopeIndex = Math.max(...maxArray);// scope表示处于什么赛季，取最大的数为最新赛季
        const data = blockData?.tables.filter((item) => item.scope === newScopeIndex);
        return [...(data?.filter((item) => item.name === selectType.name)[0]?.rows || [])];
      }
    }
    if (tabescent.compName === 'CBA' && blockData?.tables) {
      if (selectType.value === 1) {
        return blockData?.tables[0]?.rows || []
      }
    }



    if (tabescent.matchType === 1) {
      if (tabescent.compName === '世界杯') {
        return blockData?.tables
      }
      //足球
      if (selectType.value === 1 && blockData?.tables) {
        return blockData?.tables[0]?.rows
      }
      if (selectType.value === 2) {
        return blockData
      }
    }
    return []
    //其余的足球
  }, [selectType, blockData, tabescent])
  console.log(BlockFilterData)

  const WorldCup = ({ item }) => {
    return (
      <>
        <tr>
          <td colspan="7" style={{ textTransform: "uppercase" }}>{en[item?.group - 1]}组</td>
        </tr>
        <tr>
          <td>排名</td>
          <td className={styles.sptd}>球队</td>
          <td>赛</td>
          <td>胜平负</td>
          <td>进/失</td>
          <td>积分</td>
        </tr>
        {
          item?.rows?.map((row, index) => (
            <>
              <tr className={styles.blockdata} key={row.team_id}>
                <td>{row.position}</td>
                <td className={styles.sptd}>
                  <img src={row.team_logo} alt={row?.team_name} loading="lazy" />
                  <i className="textoverone" >{row.team_name}</i>
                </td>
                <td>{row?.total}</td>

                <td>{(row?.won || 0) + '/' + (row?.draw || 0) + '/' + (row?.loss || 0)}</td>
                <td>
                  {row?.goals + "/" + row?.goals_against}
                </td>
                <td>
                  {row?.points}
                </td>
              </tr>
            </>
          ))
        }
      </>
    )
  }
  return (
    <RenderJudge value={mobile} inactive={
      <section className={styles.integral}>
        <Head>
          <title>
            积分榜_英超射手榜_NBA积分榜_英超积分榜_西甲积分榜-鑫球体育</title>
          <meta name='description' content='联赛数据中心提供最新最权威的足球数据、NBA数据等世界热门联赛的查询服务，包括英超、西甲、德甲、意甲、法甲、中超等排行榜、积分榜等一应俱全。' />
          <meta name="keywords" content='英超积分榜,西甲积分榜,意甲积分榜,中超积分榜,欧冠积分榜,欧洲杯积分榜,NBA积分榜,英超射手榜,西甲射手榜' />
        </Head>
        <header>
          <Breadcrumb separator=">">
            <Breadcrumb.Item href='/'>首页</Breadcrumb.Item>
            <Breadcrumb.Item href={`/integral`}>积分榜</Breadcrumb.Item>
          </Breadcrumb>
        </header>
        <div>
          <nav>
            {
              matchList?.map((row, index) => (
                <span key={row?.compId} onClick={(e) => { changeTab(row) }} className={tabescent?.id === row?.id ? styles.active : null}>
                  <img src={row?.logo} alt="" loading="lazy" />
                  <em>{row?.compName}</em>
                </span>
              ))
            }
          </nav>
          <aside>
            <nav>
              {
                SecondList(tabescent)?.map((row, index) => (
                  <span key={index} onClick={() => changSecondTab(row)} className={row?.value === selectType.value ? styles.active : null}>
                    {row?.name}
                  </span>
                ))
              }
            </nav>
            <table className={styles.topTitle}>
              <thead>
                <RenderJudge value={tabescent.matchType === 2 && [-1, -2, 1].includes(selectType.value)} active={
                  <tr className={styles.basketball}>
                    <th>排名</th>
                    <th className={styles.sptd}>球队</th>
                    <th>胜</th>
                    <th>负</th>
                    <th>胜率</th>
                  </tr>
                } />


                <RenderJudge value={tabescent.matchType === 2 && [3, 4, 5].includes(selectType.value)} active={
                  <tr className={styles.basketball}>
                    <th>排名</th>
                    <th className={styles.sptd}>球员</th>
                    <th className={styles.sptd}>球队</th>
                    <th>场均</th>
                  </tr>
                } />

                <RenderJudge value={tabescent?.compName === '世界杯'} inactive={
                  <>
                    <RenderJudge value={tabescent.matchType === 1 && [1].includes(selectType.value)} active={
                      <tr className={styles.basketball}>
                        <th>排名</th>
                        <th className={styles.sptd}>球队</th>
                        <th >胜/平/负</th>
                        <th>积分</th>
                      </tr>
                    } />

                    <RenderJudge value={tabescent.matchType === 1 && [2].includes(selectType.value)} active={
                      <tr className={styles.basketball}>
                        <th>排名</th>
                        <th className={styles.sptd}>球员</th>
                        <th className={styles.sptd}>球队</th>
                        <th>进球</th>
                      </tr>
                    } />
                  </>
                } />
              </thead>
              <tbody className={tabescent.matchType === 0 ? null : styles.scrollbar}>
                <RenderJudge value={selectType?.value === 's'} active={
                  <Live initFetch ready={true} container={{ height: "940px" }} match={{ type: tabescent.matchType, id: tabescent?.compId }} style={{ width: "100%", padding: 0 }}></Live>
                } inactive={
                  BlockFilterData?.length > 0 && BlockFilterData?.map((item, index) => (
                    <>
                      <RenderJudge key={item?.id} value={tabescent.matchType === 2} active={
                        <>
                          <RenderJudge value={[-1, -2, 1].includes(selectType.value)} active={
                            <tr className={styles.blockdata} key={item.team_id}>
                              <td>{item.position}</td>
                              <td className={styles.sptd}>
                                <img src={item.team_logo} alt={item?.team_name} loading="lazy" />
                                <i className="textoverone">{item.team_name}</i>
                              </td>
                              <td>{item?.won || 0}</td>
                              <td>{item?.lost || 0}</td>
                              <td>
                                {(Number(item.won_rate) * 100).toFixed(0)}
                                %
                              </td>
                            </tr>
                          } />
                          <RenderJudge value={[3, 4, 5].includes(selectType.value)} active={
                            <tr className={styles.bullockSp} key={item?.teamId}>
                              <td>{index + 1}</td>
                              <td className={styles.sptd}>
                                <img src={item?.playerLogo} alt={item?.teamName} loading="lazy" />
                                <em className="textoverone">{item?.playerName}</em>
                              </td>
                              <td className={styles.sptd}>
                                <img src={item?.teamLogo} alt={item?.teamName} loading="lazy" />
                                <i className="textoverone">{item?.teamName}</i>
                              </td>
                              <td>
                                {
                                  selectType.value === 3 ? item?.avgPoint : selectType.value === 4 ? item?.avgAssists : selectType.value === 5 ? item?.avgRebounds : ''
                                }
                              </td>
                            </tr>
                          } />
                        </>
                      } />
                      <RenderJudge key={item?.id} value={tabescent.matchType === 1} active={
                        <>
                          <RenderJudge value={[1].includes(selectType.value)} active={
                            <RenderJudge value={tabescent?.compName === '世界杯'} active={
                              <WorldCup item={item} key={item.team_id}></WorldCup >
                            } inactive={
                              <tr className={styles.blockdata} key={item.team_id}>
                                <td>{item.position}</td>
                                <td className={styles.sptd}>
                                  <img src={item.team_logo} alt={item?.team_name} loading="lazy" />
                                  <i className="textoverone" >{item.team_name}</i>
                                </td>
                                <td  >{(item?.won || 0) + '/' + (item?.draw || 0) + '/' + (item?.loss || 0)}</td>
                                <td >
                                  {item?.points}
                                </td>
                              </tr>
                            } />
                          } />
                          <RenderJudge value={[2].includes(selectType.value)} active={
                            <RenderJudge value={tabescent?.compName === '世界杯'} active={
                              <WorldCup item={item}></WorldCup>
                            } inactive={
                              <tr className={styles.bullockSp} key={item?.teamId}>
                                <td>{item.position}</td>
                                <td className={styles.sptd}>
                                  <img src={'https://cdn.sportnanoapi.com/football/player/' + item?.player?.logo} alt="" loading="lazy" />
                                  <em >{item?.player?.name_zh}</em>
                                </td>
                                <td className={styles.sptd} style={{ '--padding': "20px" }}>
                                  <img src={'https://cdn.sportnanoapi.com/football/team/' + item?.team?.logo} alt="" loading="lazy" />
                                  <i className="textoverone">{item?.team?.name_zh}</i>
                                </td>
                                <td>{item.goals}</td>
                              </tr>
                            } />
                          } />
                        </>
                      } />
                    </>
                  ))
                } />
              </tbody>
            </table>
          </aside>
        </div>
      </section >
    } />
  )
}


Integral.getLayout = (page, props) => {
  return (
    <Page header footer {...props}>
      {page}
    </Page >
  )
}

export async function getServerSideProps (ctx) {
  const [matchList] = await Promise.all([getMatchList()])
  const data = [
    {
      compName: "全部",
      logo: AllImg?.src + "?time=" + new Date().getTime(),
      id: -1,
      compId: -1,
      matchType: 0
    },
    // {
    //   logo: hotImg.src,
    //   compName: "热门",
    //   id: -2,
    //   compId: -2,
    //   matchType: 0
    // },
    ...matchList
  ]
  return {
    props: {
      matchList: data
    }
  }
}


export default Integral